Observable, kezako ?

L’Observable javascript (ojs) est un ensemble d’améliorations apportées à vanilla JavaScript créé par Mike Bostock (également auteur de D3). Observable JS se distingue par son exécution réactive, qui convient particulièrement bien à l’exploration et à l’analyse interactives des données. Objectif : faire collaborer une communauté autour de la visualisation de données.

Observable est aussi une startup fondée par Mike Bostock et Melody Meckfessel, qui propose une plateforme 100% en ligne pour concevoir, partager et diffuser des visualisations de données.

C’est aussi une plateforme web disponible à l’adresse https://observablehq.com/ qui héberge des notebooks computationnels sur la visualisation de données.

Les notebooks sont comme des billets de blog. Ils contiennent du texte, des images et du contenu multimédia. Ils peuvent être rangés dans des collections. Ils sont disponibles en ligne via une url. Comme on peut s’y attendre, ils contiennent aussi des lignes de code. L’objectif : faire de la Programmation lettrée (literate programming).

Références

Reactive, reproducible, collaborative: computational notebooks evolve, par Jeffrey M. Perkel. https://www.nature.com/articles/d41586-021-01174-w

Javascript for data Analysis, par Mike Bostock https://towardsdatascience.com/javascript-for-data-analysis-2e8e7dbf63a7

Observable notebooks

Les notebooks Observable permettent de travailler en ligne, directement dans le navigateur, sans avoir besoin d’installer le moindre logiciel. Il faut bien sur avoir une bonne connexion internet.

Par exemple : https://observablehq.com/trending

Observable framework

Depuis cette année, Observable a lancé un nouvel outil nommé Observable Framework

Observable dans Quarto

Quarto permet de créer des documents markdown, des articles, des rapports, des présentations, des sites web, des blogs et des livres, aux formats HTML, PDF, Word, ePub, etc.

Il permet de créer un contenu dynamique dans différents langages : Python, R, Julia et Observable JavaScript.

Cela permet de créer des documents, des rapports et des analyses entièrement reproductibles

JavaScript ≠ ojs

Les cellules / chunk {ojs}

Dans Quarto, on peut écrire/exécuter du code Observable en utilisant des chuncks {ojs}.

Chaque ligne définit une variable et une cellule qui doit être unique.

cellule 1 :

a = 5

cellule 2 :

b = 7

cellule 3 :

a + b

Avec ojs, l’ordre d’écriture n’a pas d’importance 🤔 On peut donc écrire :

Ceci :

c * d

Avant ça

c = 3

et ça

d = 8

La raison est que la relation entgre les cellules s’effectue de manière topologique.

Chaque cellule doit impérativement être unique. En conséquance, je n’ai pas le droit de redéfinir une de ces variables.

e = 10
e = 5

Il est donc souvent utile de créer des blocs de code avec des {…} quand le traitement devient plus complexe.

{
  let val1 = 8;
  let val2 = 7;
  val1 = 5;
  return val1 * val2;
}

Mais la plupart du temps, pour faire ce genre de calcul, on écrira plutôt des fonctions. Comme ceci :

function sum(a, b) {
  return a + b;
}
// Appel de la fonction
sum(10, 30)

Ou comme cela :

multi = (a, b) => a * b
// Appel de la fonction
multi(3, 8)

Ce parti pris fort, peut être déroutant. Mais il a un gros avantage. Il permet d’organiser un document indépendemment de la façon dont on code. Cela permet par exemple de mettre une carte en haut de la page et en annexe technique tout en bas le code qui la génère.

Les Inputs

Dans Observable, on a à disposition des Inputs directement prêts à l’emploi.

👉 button

viewof clicks = Inputs.button("Click")
clicks

👉 toogle

viewof mute = Inputs.toggle({label: "Mute", value: true})
mute

👉 range

viewof gain = Inputs.range([0, 11], {value: 5, step: 0.1, label: "Gain"})
gain

👉 checkbox

viewof colors = Inputs.checkbox(["red", "green", "blue"], {label: "color"})
colors

👉 radio

viewof color = Inputs.radio(["red", "green", "blue"], {label: "color"})
color

👉 select

villes = ["Sousse", "Monastir", "Sfax"]
viewof maville = Inputs.select(villes, {value: "steelblue", label: "Choisissez une ville"})
maville

👉 text

viewof text = Inputs.text()
text

👉 textarea

viewof textarea = Inputs.textarea()
textarea

👉 date

viewof date = Inputs.date()
date

👉 color

viewof pickcolor = Inputs.color({label: "couleur préférée", value: "#4682b4"})
pickcolor

👉 file

viewof file = Inputs.file()
file

👉 formulaire

viewof range1 = Inputs.range([0, 11], {value: 5, step: 0.1, label: "range1"})
viewof range2 = Inputs.range([0, 11], {value: 5, step: 0.1, label: "range2"})
viewof range3 = Inputs.range([0, 11], {value: 5, step: 0.1, label: "range3"})

range1

range2

range3

Tout est réactif 🔥

Dans Observable, grâce à la relation topologique entre les cellules, tout est réactif. Chaque fois qu’on bouge quelque chose, ce qui en dépend est ré-éxécuté.

viewof age = Inputs.range([15, 70], {label: "age", value: 30, step: 1,})
viewof nom = Inputs.text({label: "nom", value: "Nicolas"})

Par exemple :

md`Je m'appelle **${nom}** et j'ai **${age}** ans :-)`

Reprenons notre SVG de tout à l’heure

{
  const svg = d3
    .create("svg")
    .attr("viewBox", [0, 0, 500, 60])
    .style("background-color", "#CCC");
    
  svg
    .append("circle")
    .attr("cx", 50)
    .attr("cy", 30)
    .attr("r", 25)
    .style("fill", "#e04a28");
    
  return svg.node();
}

On peut facilement proposer à l’utilisateur de modifier ce dessin en remplaçant des valeurs par des variables pilotées par des inputs.

{
  const svg = d3
    .create("svg")
    .attr("viewBox", [0, 0, 500, 60])
    .style("background-color", "#CCC");
    
  svg
    .append("circle")
    .attr("cx", cx)
    .attr("cy", 30)
    .attr("r", r)
    .style("fill", col);
    
  return svg.node();
}

Par exemple :

viewof cx = Inputs.range([30, 470], {value: 50, step: 1, label: "position"})
viewof col = Inputs.color({ value: "#e04a28", label: "couleur"})
viewof r = Inputs.range([5, 30], {value: 25, step: 0.1, label: "rayon"})

{
  const svg = d3
    .create("svg")
    .attr("viewBox", [0, 0, 500, 60])
    .style("background-color", "#CCC");
    
  svg
    .append("circle")
    .attr("cx", cx)
    .attr("cy", 30)
    .attr("r", r)
    .style("fill", col);
    
  return svg.node();
}

Les données

L’ajout de données s’effectue avec l’instruction FileAttachment()

👉 fichier csv

data1 = FileAttachment("data/afrika_data.csv").csv()

Les données sont importées et converties automatiquement au format json

data1

Pour les visualiser, on utilise Inputs.table()

Inputs.table(data1)

👉 fichier xlsx

On peut également importer des fichiers excel

classeur = FileAttachment("data/afrika.xlsx").xlsx()

On obtient la liste des feuilles comme cela :

classeur.sheetNames

Puis, on peut choisir la feuille à ouvrir

data2 = classeur.sheet("data", {
  headers: true
})

data2

👉 Mise en forme des données

Pour mettre en forme les données, on peut le faire en pure JavaScript.

subdata1 = data1
  .filter((d) => +d.ESPVIE > 65)
  .map((d) => ({ code: d.iso3, nom: d.nom, POP: d.POP, PIB: d.PIB, ESPVIE: d.ESPVIE }))
  .sort((a, b) => d3.descending(b.ESPVIE, a.ESPVIE))

Ca donne ceci :

Inputs.table(subdata1)

On peut aussi utiliser arquero. Voir : https://observablehq.com/@observablehq/data-wrangler.

subdata2 = aq
  .from(data1)
  .filter((d) => d["ESPVIE"] > 65)
  .rename({ iso3: "code" })
  .select("code", "nom", "POP", "PIB", "ESPVIE")
  .orderby("ESPVIE")
  .objects()

Le résultat est le même.

Inputs.table(subdata2)

👉 fichier geoJSON

Pour utiliser des géométries, on utilisera prioritairement le format geoJSON.

basemap = FileAttachment("data/africa.json").json()

Voilà la structure d’un geoJSON

basemap

Et voici à quoi il ressemble si on l’affiche (nous verrons plus tard comment…)

viz = require("geoviz@0.5.9")
{
let svg = viz.create({domain: basemap, width: 500, zoomable:true})
svg.path({data: basemap, tip: true, fill:"red",})
return svg.render()
}

Librairies externes

Observable javascript n’est pas un écosystème fermé. Des millions de librairies javascript existent sur NPM (équivalent du CRAN pour R). Il est possible de les utiliser.

Ici, nous pouvons les importer directement avec l’instruction require()

geo = require("geotoolbox")

Généralisation cartographique

viewof k = Inputs.range([0.01, 0.5], { label: "k", step: 0.01, value: 0.05 })
geo.simplify(world, { k })

world = FileAttachment("data/world.json").json()
viewof k = Inputs.range([0.01, 0.5], { label: "k", step: 0.01, value: 0.05 })
world_light = geo.simplify(world, { k })
{
let svg = viz.create({domain: world, width: 500})
svg.path({data: world_light, tip: true, fill:"none",stroke:"red"})
return svg.render()
}

Imports

On l’a dit tout à l’heure, Observable c’est aussi une plateforme web hébergeant des notebooks.

Si on a une connexion internet, il ets possible d’importer n’importe quelle cellule de n’importe quel notebook avec la fonction import. Dit autrement, toutes les notebooks hébergés sur observablehq.com fonctionnent comme des api.

import {SankeyChart} from "@d3/sankey"
import {energy} from "@d3/sankey"

    import {SankeyChart as SankeyChart} from "@d3/sankey"

    import {energy as energy} from "@d3/sankey"

Puis, on peut utiliser cette fonction.

chart = SankeyChart({
  links: energy
}, {
  nodeGroup: d => d.id.split(/\W/)[0], // take first word for color
  width,
  height: 600
})